<%-- Created by IntelliJ IDEA. User: Administrator Date: 2024/5/23 Time: 21:27 To change this template use File |
  Settings | File Templates. --%>
  <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>

    <head>
      <title>Title</title>
      <script src="../node_modules/jquery/dist/jquery.js"></script>
      <script src="../node_modules/bootstrap3/dist/js/bootstrap.js"></script>
      <link rel="stylesheet" href="../node_modules/bootstrap3/dist/css/bootstrap.css">
      <style>
          .navTitle{

               position: relative;
               -webkit-box-reflect: below -12px linear-gradient(transparent,rgba(0,0,0,0.2));

          }
          .navTitle span{
              position: relative;
              display: inline-block;
              color: black;
              font-size: 15px;
              text-transform: uppercase;
              animation: animate 1s ease-in-out infinite;
              animation-delay: calc(0.1s * var(--i));
          }
          @keyframes animate {
              0%{
                  transform: translateY(0px);
              }
              20%{
                  transform: translateY(-20px);
              }
              40%,100%{
                  transform: translateY(0px);
              }
          }
          table thead tr{
              background: green;
              color: white;
          }
          .input-group-addon{
              background: #337ab7;
              color: white;
              border-bottom-left-radius: 5px !important;
              border-top-left-radius: 5px !important;
          }
      </style>
    </head>

    <body>

      <nav class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="navbar-brand navTitle" href="#">
              <span style="--i:1">教</span>
              <span style="--i:2">学</span>
              <span style="--i:3">管</span>
              <span style="--i:4">理</span>
          </div>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <% String[] names=new String[]{"学生","老师","课程","成绩","班级","科目","用户"}; %>
          <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
              <% for(int i=0;i<names.length;i++){ %>
              <li><a onclick="loadHtml(<%= i %>)"><%=names[i]%></a></li>
              <% } %>
            </ul>
<%--            <form class="navbar-form navbar-left" role="search">--%>
<%--              <div class="form-group">--%>
<%--                <input type="text" class="form-control" placeholder="Search">--%>
<%--              </div>--%>
<%--              <button type="submit" class="btn btn-default">Submit</button>--%>
<%--            </form>--%>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </li>
            </ul>
          </div><!-- /.navbar-collapse -->
      </nav>
      <div class="main-body">

      </div>
    </body>
    <script>
        $(function() {
          loadHtml(0);
        })
        var names={
          0: "学生",
          1: "老师",
          2: "课程",
          3: "成绩",
          4: "班级",
          5: "科目",
          6: "用户",
        }
        function getHtml(name){
          $.ajax({
            type: "post",
            url: "/getHtml",
            data: {name},
            success: function (response) {
              var pattern=/<body>(\s|\S)*<\/body>/
              var data=response.toString();
              var html=pattern.exec(data)[0].replace(/<body>|<\/body>/,"").replace(/\s\\r\s/g,"").replaceAll(/\s\\n\s/g,"");
              $(".main-body").html(html);
            }
          });
        }
        function loadHtml(index){
            getHtml(names[index])
        }
    </script>
    </html>